/*
 * @Author: 肖思汗 
 * @Date: 2025-05-19 22:17:08 
 * @Last Modified by: 肖思汗
 * @Last Modified time: 2025-07-19 17:43:09
 */

import { ArrowDown, ArrowUp } from "@nutui/icons-react-taro";
import { Button, Space } from "@nutui/nutui-react-taro";
import { Image, Text, View } from "@tarojs/components";
import Taro from "@tarojs/taro";
import { autorun, toJS } from "mobx";
import { observer } from "mobx-react-lite";
import { ReactNode, useEffect, useState } from "react";
import ColorItem from "src/components/ColorItem/ColorItem";
import utils from "src/utils/utils";
import utilsStore from "src/utils/utilsStore";
import { GoodsBaseData, GoodsData } from "types/type";
import designerStore from "../Designer/designerStore";
import { HexColorPicker } from "../HexColorPicker/HexColorPicker";
import clothIconPNG from "./img/clothIcon.png";
import styles from "./leftTop.module.less";
import categoryStore from "src/pages/Category/categoryStore";
import leftTopStore from "./leftTopStore";
import perview3der from "../RightTop/PreView2D3D/perview3der";
import clsx from "clsx";
import stickerModelStore from "../StickerModel/stickerModelStore";
import textModelStore from "../TextModel/textModelStore";
import templateModelStore from "../TemplateModel/templateModelStore";
import maskModelStore from "../MaskModel/maskModelStore";

interface Iprops {
    children?: ReactNode
}

// 左上角的款式和颜色
const LeftTop = observer((props: Iprops) => {

    const [showMore, setShowMore] = useState(false);
    const goodsBaseData = toJS(designerStore.goodsBaseData);
    // 当前选中的颜色值
    const selectColorValue = designerStore.selectColorValue || `#ffffff`;

    const selectThreadColor = designerStore.threadColor || '#ffffff';

    return (
        <View
            className={clsx(
                styles.leftTop,
                (
                    stickerModelStore.show ||
                    textModelStore.show ||
                    templateModelStore.show ||
                    maskModelStore.show
                )
                && styles.hide
            )}
            style={{
                top: utilsStore.titleTop + utils.rpx2px(20)
            }}
        >
            {
                !leftTopStore.showColorPicker &&
                <View
                    className={styles.switchStyle}
                    onClick={() => {
                        categoryStore.setIsSwitchKua(true);
                        Taro.switchTab({ url: '/pages/Category/Category' });
                    }}
                >
                    <Image
                        src={clothIconPNG}
                        className={styles.clothIcon}
                        mode="widthFix"
                    />
                    切换款式
                </View>
            }

            {
                !leftTopStore.showColorPicker &&
                ["烫画", "直喷"].includes(goodsBaseData.secondaryCraftName) &&
                <View className={styles.colorList} >
                    {/* 展开按钮 */}
                    {
                        goodsBaseData.data.colors.length > 4 &&
                        <Button
                            className={styles.open}
                            onClick={() => setShowMore(!showMore)}
                        >
                            {showMore ? <ArrowUp /> : <ArrowDown />}
                        </Button>
                    }
                    {
                        goodsBaseData.data.colors.slice(0, showMore ? Infinity : 4).map((item, index) => {
                            return (
                                <ColorItem
                                    key={index}
                                    color={item.color}
                                    active={selectColorValue === item.color}
                                    onClick={async () => {
                                        designerStore.setDesignColor(item.cn, item.color);
                                        // 加载颜色对应的上身效果图
                                        const currentColor = goodsBaseData.data.colors.find((c) => c.color === item.color);
                                        if (currentColor) {
                                            await perview3der.initColorMockups((currentColor.mini_program_mockup_urls || []));
                                        }
                                        await perview3der.updataClothMap(goodsBaseData.secondaryCraftName);
                                    }}
                                />
                            );
                        })
                    }
                </View>
            }

            {
                ["升华"].includes(goodsBaseData.secondaryCraftName) &&
                <>
                    {
                        !leftTopStore.showColorPicker &&
                        <Space
                            className={styles.colorBlockBox}
                        >
                            <Text className={styles.text} >颜色</Text>
                            <View
                                className={styles.colorBlock}
                                style={{ backgroundColor: selectColorValue }}
                                onClick={() => {
                                    leftTopStore.setShowColorPicker(true);
                                }}
                            > </View>

                        </Space>
                    }

                    <HexColorPicker
                        title="选择颜色"
                        onCancel={() => {
                            leftTopStore.setShowColorPicker(false);
                        }}
                        onOK={(applyAll) => {
                            leftTopStore.setShowColorPicker(false);
                            // 应用全部
                            designerStore.setDesignColor(
                                designerStore.selectColor,
                                designerStore.selectColorValue,
                                applyAll
                            );
                        }}
                        visible={leftTopStore.showColorPicker}
                        color={selectColorValue}
                        onChange={(colorValue: `#${string}`) => {
                            designerStore.setDesignColor("", colorValue);
                        }}
                    >
                        <Space
                            className={styles.colorBlockBox}
                            style={{
                                padding: "40rpx 0rpx 40rpx 16rpx"
                            }}
                        >
                            <Text
                                className={styles.text}
                                style={{
                                    fontSize: "30rpx",
                                }}
                            >缝线颜色</Text>
                            <View>
                                {
                                    ["#ffffff", "#B4B5B9", "#000000"].map((color: string, index: number) => {
                                        return (
                                            <ColorItem
                                                key={index}
                                                color={color}
                                                active={selectThreadColor === color}
                                                onClick={() => {
                                                    designerStore.setThreadColor(color);
                                                }}
                                            />
                                        );
                                    })
                                }
                            </View>
                        </Space>
                    </HexColorPicker>
                </>
            }

        </View>
    );
});

export default LeftTop;